<template>
  <div class="left-menus">
      <div class="left-menus_fixed">
        <div class="menus-header">
            <i class="el-icon-s-shop"></i>溯源服务
        </div>
        <div class="menus-main">
          <el-menu class="el-menu-vertical-demo" :default-active="active" active-text-color="#00BAAD" :default-openeds="[openeds]">
              <el-menu-item index="1" @click="$router.push({path: '/traceability'})">总览</el-menu-item>
              <!-- <el-menu-item index="2" @click="$router.push({path: '/traceability/brand'})">品牌商管理</el-menu-item> -->
              <!-- <el-menu-item index="3" @click="$router.push({path: '/traceability/marketing'})">商品管理</el-menu-item> -->
              <el-menu-item index="4" @click="$router.push({path: '/traceability/traceab'})">溯源配置</el-menu-item>
              <el-menu-item index="6" @click="$router.push({path: '/traceability/roler'})">订阅管理</el-menu-item>
               <el-submenu index="5">
                <template slot="title">
                  <span>配置管理</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="5-1" @click="$router.push({path: '/traceability/configu'})">溯源环节模版管理</el-menu-item>
                  <!-- <el-menu-item index="5-2" @click="$router.push({path: '/traceability/applet'})">小程序模版管理</el-menu-item> -->
                </el-menu-item-group>
              </el-submenu>
              <el-menu-item index="7" @click="$router.push({path: '/traceability/statistical'})">溯源统计</el-menu-item>
          </el-menu>
        </div>
      </div>
  </div>
</template>

<script>
export default {
  props: {
    active: {
      type: String,
      default: '1'
    },
    openeds: {
      type: String,
      default: ''
    }
  }
}
</script>

<style lang="scss" scope>
.left-menus{
    width: 220px;
    height: 100%;
    margin-right: 15px;
    position: relative;
    .left-menus_fixed{
      position: fixed;
      width: 220px;
      border-top:3px solid rgba(0, 186, 173, 1);
      background-color: #fff;
    }
    .menus-header{
        border-bottom: 1px solid #ddd;
        line-height: 50px;
        padding:0 10px;
        font-size: 16px;
    }
    .is-active{
        background-color: rgba(248, 255, 255, 1);
    }
    .el-menu-item{
        height: 40px;
        line-height: 40px;
    }
    .el-menu-item:hover,.el-menu-item:hover i{
      color:rgba(0, 186, 173, 1);
      background-color: rgba(248, 255, 255, 1);
  }
}
</style>
